<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>非受控组件</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="test"></div>

		<script type="text/babel">
			/* 
					一、高阶函数：如果有一个函数A，A符合下面2个规则中的任何一个，那么A函数就是高阶函数
									1.若A函数接收的参数是一个函数，那么A就可以称之为高阶函数；
									2.若A函数调用的返回值依然是一个函数，那么A就可以称之为高阶函数；
							常见的高阶函数：数组相关的方法、bind、Promise、setTimeout、等等

					二、函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数，最后统一处理的编码形式
							柯里化举例：
									function sum(a){
										return (b)=>{
											return (c)=>{
												return a+b+c
											}
										}
									}
			*/
			//定义组件
			class Login extends React.Component{
				//状态中的数据在使用前最好进行初始化
				state = {
					username:'',
					password:'',
				}
				render(){
					return(
						<form onSubmit={this.login}>
							用户名 <input onChange={this.saveFormData('username')} type="text"/>	<br/><br/>
							密码 <input onChange={this.saveFormData('password')} type="password"/>	<br/><br/>
							<button>登录</button>
						</form>
					)
				}

				/* //用户名发生改变的回调
				saveUserName = (e)=>{
					this.setState({username:e.target.value}) //将用户名存入state
				}

				//密码发生改变的回调
				savePassword = (e)=>{
					this.setState({password:e.target.value}) //将密码存入state
				} */

				//saveFormData是程序员自己调的，saveFormData返回的那个函数是交给react作为回调的。
				saveFormData = (str)=>{
					return (e)=>{ 
						console.log(str,e.target.value) 
						this.setState({[str]:e.target.value})
					}
				}

				//登录按钮的回调
				login = (e)=>{
					e.preventDefault(); //阻止表单提交后跳转
					const {username,password} = this.state
					alert(`用户名是${username}，密码是${password}`)
				}
			}
			//渲染组件
			ReactDOM.render(<Login/>,document.getElementById('test'))
		</script>
	</body>
</html>
